<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>大屏数据可视化平台</title>
    <link rel="stylesheet" href="./assets/css/pc.css" />
  </head>
  <body>
    <video
      autoplay
      loop
      muted
      width="1920"
      height="1080"
      class="bg"
      style="object-fit: fill"
    >
      <source src="./assets/imgs/bg.mp4" />
    </video>

    <!-- loading  -->
    <div class="loading" style="visibility: visible">
      <img width="120" src="./assets/imgs/loading.gif" />
      <img width="100" src="./assets/imgs/loading-text.png" />
    </div>
    <!-- loading  -->

    <!-- 内容 -->
    <main style="visibility: hidden">
      <div class="column">
        <div class="box" style="height: 3rem">
          <div class="echarts-title">
            <!-- <div class="iconfont icon1"></div> -->
            柴油消耗分析
          </div>
          <div class="echarts-content pc-l1" style="background: none"></div>
        </div>
        <div class="box" style="height: 3rem">
          <div class="echarts-title">
            <div class="iconfont icon1"></div>
            客户地域排行
          </div>
          <div class="echarts-content pc-l2" style="background: none"></div>
        </div>
        <div class="box" style="height: 3rem">
          <div class="echarts-title">
            <div class="iconfont icon2"></div>
            24小时店铺浏览量曲线
          </div>
          <div class="echarts-content pc-l3" style="background: none"></div>
        </div>
      </div>
      <div class="column">
        <div class="box box-m1" style="height: 2.3rem">
          <div class="line"></div>
          <div class="title">大屏可视化平台</div>
          <div class="line"></div>
        </div>
        <div class="box box-m2" style="height: 3.9rem">
          <p class="date">2022-06-13 07:36:35</p>
          <p class="money-desc">活动期间交易额</p>
          <p class="money">23,212,450</p>
          <p class="num">销售量：24451件</p>
        </div>
        <div class="box" style="height: 3rem">
          <div class="echarts-title">
            <div class="iconfont icon2"></div>
            每日成交量曲线
          </div>
          <div class="echarts-content pc-m3" style="background: none"></div>
        </div>
      </div>
      <div class="column">
        <div class="box box-r1" style="height: 3rem">
          <div class="echarts-title">
            <div class="iconfont icon3"></div>
            会员购物占比
          </div>
          <div class="echarts-content pc-r1-box" style="background: none">
            <div class="pc-r1"></div>
            <div class="pc-r1-content">
              <p class="title">老会员购买</p>
              <p class="num">22,339</p>
              <p class="title">非会员购买</p>
              <p class="num">2,134</p>
            </div>
          </div>
        </div>
        <div class="box box-r2" style="height: 3rem">
          <div class="echarts-title">
            <div class="iconfont icon4"></div>
            订单动态
          </div>
          <div class="echarts-content" style="background: none">
            <ul>
              <li>
                11.05 &nbsp; 21:22 &nbsp; 产品名称1 &nbsp;
                <span>未付款</span>
              </li>
              <li>
                11.05 &nbsp; 21:22 &nbsp; 产品名称2 &nbsp;
                <span class="green">已付款</span>
              </li>
              <li>
                11.05 &nbsp; 21:22 &nbsp; 产品名称3 &nbsp;
                <span class="green">已付款</span>
              </li>
              <li>
                11.05 &nbsp; 21:22 &nbsp; 产品名称4 &nbsp;
                <span class="green">已付款</span>
              </li>
              <li>
                11.05 &nbsp; 21:22 &nbsp; 产品名称5 &nbsp;
                <span>未付款</span>
              </li>
              <li>
                11.05 &nbsp; 21:22 &nbsp; 产品名称4 &nbsp;
                <span class="green">已付款</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="box" style="height: 3rem">
          <div class="echarts-title">
            <div class="iconfont icon5"></div>
            最受欢迎产品TOP5
          </div>
          <div class="echarts-content pc-r3" style="background: none"></div>
        </div>
      </div>
    </main>
    <!-- 内容 -->

    <script src="./assets/js/pc-flexible.js"></script>
    <script src="./assets/js/common-jq.js"></script>
    <script src="./assets/js/common-echarts.js"></script>
    <script src="./assets/js/pc-l1.js"></script>
    <script src="./assets/js/pc-l2.js"></script>
    <script src="./assets/js/pc-l3.js"></script>
    <script src="./assets/js/pc-m3.js"></script>
    <script src="./assets/js/pc-r1.js"></script>
    <script src="./assets/js/pc-r3.js"></script>
    <script>
      window.onload = () => {
        $(".loading").css("visibility", "hidden");
        $("main").css("visibility", "visible");
      };
    </script>
  </body>
</html>
